<template>
    <div class="tc" @click.stop="">
        <div class="header">应急指挥</div>
        <div style="position: absolute;right: 0px;top: 0px" @click="close()">
            <img src="./img/close.png" alt="">
        </div>
        <ul class="list">
            <li v-for="item in nav" :class="{'active':active==item.value}" @click.stop="select(item)">{{item.lable}}
            </li>
        </ul>
        <div>
            <div :is="view"></div>
        </div>
    </div>
</template>

<script>
    import attribute from './slot/attribute'
    import console from './slot/console'
    import paramc from './slot/param'
    import texts from './slot/text'
    import bus from '@/eventBus/bus'

    export default {
        name: "Dialog",
        data() {
            return {
                active: 1,
                view: attribute,
                nav: [
                    {
                        lable: '文本下发',
                        value: 3,
                        title: '',
                        view: 'texts'
                    },
                    {
                        lable: '查询参数',
                        value: 2,
                        title: '',
                        view: 'paramc'
                    },
                    {
                        lable: '查询属性',
                        value: 1,
                        title: '应急指挥',
                        view: 'attribute'
                    },
                    {
                        lable: '终端控制',
                        value: 4,
                        title: '',
                        view: 'console'
                    }
                ]
            }
        },
        methods: {
            select(val) {
                this.active = val.value
                this.view = val.view
            },
            cc() {
            },
            close() {
                let obj = {
                    status: false,
                    type: 'inquire'
                }
                bus.$emit('dialogshow', obj)
            }
        },
        components: {
            attribute,
            paramc,
            texts,
            console
        }
    }
</script>

<style scoped>
    .tc {
        width: 820px;
        height: 497px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        z-index: 99999;
        /*overflow: hidden;*/
        background: url("../../../static/images/bg_big.png") no-repeat center;
    }

    .header {
        width: 283px;
        height: 76px;
        line-height: 76px;
        text-align: center;
        margin: -33px 0 0 286px;
        overflow: hidden;
        color: #ff9b00;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        font-size: 1.4em;
        letter-spacing: 10px;
        background: url("../../../static/images/header.png") no-repeat center;
    }

    .list {
        float: left;
        width: 180px;
        height: 300px;
        margin-top: 65px;
        margin-left: 55px;
        /*border:1px solid red;*/
        /*box-sizing: border-box;*/
        overflow: hidden;
    }

    .list li {
        width: 150px;
        height: 47px;
        line-height: 47px;
        margin: 20px auto 0;
        /*border:1px solid red;*/
        /*box-sizing: border-box;*/
        text-align: center;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        font-size: 1.05em;
        background: url("../../../static/images/butten.png") no-repeat center;
    }

    .active {
        color: #ff9b00 !important;
        background: url("../../../static/images/butten_choose.png") no-repeat center !important;
        width: 180px !important;
        height: 60px !important;
        line-height: 60px !important;
    }


</style>
